<!DOCTYPE html>
<html>

<head>
    <include file="public@head" title="相册管理"/>
</head>

<body class="layui-layout-admin">
<include file="public@header"/>
<include file="public@side"/>
<div class="layui-body">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a href="{:url('admin/index/index')}">主页</a>
        <a>系统设置</a>
        <a href="{:url('admin/slide/index')}">图册管理</a>
        <a><cite>图片管理</cite></a>
    </div>

    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">
                图片管理
                <div class="layui-btn-group fr">
                    <a class="layui-btn layui-btn-sm layui-btn-normal"
                       href="{:url('addItem')}?slideID={$Request.param.slideID}">添加图片</a>
                </div>
            </div>
            <div class="layui-card-body">
                <table class="layui-hide table-center" id="lists" lay-filter="lists"></table>

                <script type="text/html" id="imageTpl">
                    <i class="icon icon-tupian" style="font-size: 36px;"></i>
                </script>

                <script type="text/html" id="switchTpl">
                    <input type="checkbox" lay-skin="switch" lay-text="显示|隐藏" lay-filter="switch"
                           data-url="{:url('itemChangeShow')}?id={{d.id}}&field=status" {{ d.status==1 ? 'checked' : '' }}>
                </script>

                <script type="text/html" id="barLists">
                    <a class="layui-btn layui-btn-sm layui-btn-warm" href="{:url('editItem')}?id={{d.id}}"><i
                            class="layui-icon">&#xe642;</i></a>
                    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete"><i
                            class="layui-icon layui-icon-delete"></i></a>
                </script>
            </div>
        </div>
    </div>
</div>
<include file="public@scripts"/>
<script>
    var table = layui.table;
    table.render({
        elem: '#lists',
        even: true,
        url: "{:url('getItems')}?slideID=" + {$Request.param.slideID},
        cols: [
            [
                {field: 'list_order', title: '排序', width: 100, edit: 'text', align: 'center'},
                {field: 'title', title: '名称', width: 150, edit: 'text', align: 'center'},
                {field: 'thumb', title: '照片', width: 80, event: 'showImage', templet: '#imageTpl', align: 'center'},
                {field: 'desc', title: '描述', edit: 'text', align: 'center'},
                {field: 'url', title: '链接', edit: 'text'},
                {field: 'status', title: '状态', width: 120, templet: '#switchTpl', align: 'center'},
                {title: '操作', width: 150, align: 'center', toolbar: '#barLists'}
            ]
        ]
    })
    ;

    table.on('edit(lists)', function (obj) {
        var value = obj.value,
            data = obj.data,
            field = obj.field;
        $.ajax({
            type: "post",
            url: "{:url('updateItem')}?id=" + data.id + "&field=" + field + "&value=" + value,
        });
    });
    table.on('tool(lists)', function (obj) {
        var data = obj.data;
        var layEvent = obj.event;
        if (layEvent === 'showImage') {
            if (data.thumb != null) {
                layer.open({
                    type: 1,
                    title: '图片查看',
                    closeBtn: 1,
                    area: ['600px', ''],
                    maxmin: false,
                    fixed: true,
                    shadeClose: true,
                    content: '<img width="600" src="' + data.thumb + '"/>',
                });
            }
        } else if (layEvent === 'delete') {
            layer.confirm('您将彻底删除【' + data.title + '】！', function (index) {
                obj.del();
                layer.close(index);
                $.ajax({
                    type: "post",
                    url: "{:url('deleteItem')}?id=" + data.id,
                });
            });
        }
    });
</script>
</body>

</html>
